<template>
  <div>



    <el-container>
      <el-aside class="operation_box" width="300px"
                style="margin-top: 0px; margin-left: 0px; border-right: 1px solid #ddd;">

        <el-tree
            class="tree"
            style="margin-top: 0px;"
            :data="dwoptions"
            node-key="id"
            :expand-on-click-node="false"
            :highlight-current="true"
            @current-change="currentchange2"
            :props="{  label: 'dwname' }"
            :default-expanded-keys="dwtree_expand_keys"
            @node-expand="handleExpand"
            @node-collapse="handleCollapse"
            ref="tree">
        </el-tree>

      </el-aside>
      <el-container style="margin-left: 100px">
        <el-main>
          <div>
            <el-input style="width: 200px; margin: 0 20px" placeholder="请输入井号" suffix-icon="el-icon-search"
                      v-model="jh"/>
            <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>

            <el-table ref="table" @selection-change="handleSelectionChange" :data="tableData"
                      style="margin: 20px;" border stripe >

<!--              <el-table-column prop="id" label="序号" width="60" v-if="true">-->
<!--              </el-table-column>-->
              <el-table-column type="index" label="序号" width="60">
              </el-table-column>
              <el-table-column sortable prop="jh" label="井号" width="120">
                <template slot-scope="scope">
                  <router-link :to="'/hs/hshistory?jh='+scope.row.jh+'&&dwid='+ scope.row.dw.id" slot="reference" style="color: #20a0ff">{{
                      scope.row.jh
                    }}
                  </router-link>
                </template>
<!--                  <template slot-scope="scope">-->
<!--                    {{scope.row.jh}}-->
<!--                  </template>-->
              </el-table-column>
              <el-table-column prop="ip" label="IP" width="180" v-if="false">
              </el-table-column>
              <el-table-column sortable prop="dw.dwname" label="所属单位" width="180">
              </el-table-column>
              <el-table-column sortable prop="cjsj" label="采集时间" width="180">
              </el-table-column>
              <el-table-column sortable prop="capacity" label="电容值" width="180">
              </el-table-column>
              <el-table-column sortable prop="sshsl" label="瞬时含水率%" width="180">
              </el-table-column>
<!--              <el-table-column sortable prop="sjhsl" label="时均含水率%" width="180">-->
<!--              </el-table-column>-->
<!--              <el-table-column sortable prop="rjhsl" label="日均含水率%" width="180">-->
<!--              </el-table-column>-->
              <el-table-column prop="#" label="操作">
                <template slot-scope="scope">

<!--                  <el-button size="mini" type="textplain" @click="showEditForm(scope.row)">详情 <i-->
<!--                      class="el-icon-info"></i></el-button>-->
                  <router-link :to="{
                    path: '/hs/hschart/',
                    query:{
                      jh: scope.row.jh,
                      dwid: scope.row.dw.id
                    }
                  }">
                    <el-button size="mini" type="textplain">图形查看<i class="el-icon-info"></i>
                    </el-button>
                  </router-link>
<!--                  <el-popconfirm-->
<!--                      style="margin: 0 10px"-->
<!--                      confirm-button-text='确定'-->
<!--                      cancel-button-text='取消'-->
<!--                      icon="el-icon-info"-->
<!--                      icon-color="red"-->
<!--                      title="确定删除吗？"-->
<!--                      @confirm="handleDel(scope.row.id)"-->
<!--                  >-->
<!--                    <el-button size="small" type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i>-->
<!--                    </el-button>-->
<!--                  </el-popconfirm>-->

                </template>
              </el-table-column>
            </el-table>
            <div class="block" style="padding: 5px">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 50, 100, 200, 500, 1000]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
              </el-pagination>
            </div>
          </div>
        </el-main>

      </el-container>
    </el-container>

  </div>

</template>
<script>
import service from "@/utils/request";
import ElementUI from "element-ui";


import VueRouter from 'vue-router'
import HomeView from "@/views/HomeView.vue";


export default {
  created() {
    service.get('/dw/getAll', {}).then(
        response => {
          if (response.data.code == 20000) {
            this.dwoptions = response.data.data
          } else {
            this.$message.error(response.data.message)
          }
        }, error => {
          ElementUI.Message({
            message: error.message,
            type: 'error'
          })
        }
    )

    this.load();
  },
  data() {
    return {

      dwoptions: [],
      dwval: [],
      dwtree_expand_keys: [1],
      jh: '',
      tableData: [],
      selectedRows: [], // 用来存储选中行的数据
      pageSize: 200,
      total: 100,
      currentPage: 1,
      dialogFormVisible: false,
      formLabelWidth: '120px'
    }
  },
  methods: {
    test() {
      console.log(this.treeval)
    },

    load() {
      service.get('/hsl/getlatestpageBydwjh', {
        params: {
          dwid: this.dwval,
          jh: this.jh,
          pagesize: this.pageSize,
          pagenum: this.currentPage,
        }
      }).then(response => {
            if (response.data.code == 20000) {
              this.tableData = response.data.data.records;
              this.total = response.data.data.total;
              this.currentPage = response.data.data.current;
              this.pageSize = response.data.data.size;
            }
          },
          error => {
            ElementUI.Message({
              message: error.message,
              type: 'error'
            })
          }
      );
    },

    handleExpand(data) {
      if (!this.dwtree_expand_keys.includes(data.id)) {
        this.dwtree_expand_keys.push(data.id)
      }
    },
    handleCollapse(data) {
      if (this.dwtree_expand_keys.includes(data.id)) {
        this.dwtree_expand_keys.splice(this.dwtree_expand_keys.indexOf(data.id), 1)
      }
    },
    async currentchange2(nodedata, node) {

      this.dwval = nodedata.id

      this.load()

    },

    nodeclick(nodedata, node, com) {
    }
    ,

    filterNode() {

    }
    ,
    dwchange(dw) {
      // console.log(dw)
      this.gx = null;
      if (dw.length > 0) {
        let dwTmp = dw[0]
        if (dw.length > 1) {
          dwTmp = dw[1]
        }
        // service.get('/gx/getlistbydw', {params: {dwid: dw[dw.length - 1]}}).then(
        service.get('/gx/getlistbydw', {params: {dwid: dwTmp}}).then(
            response => {
              if (response.data.code == 20000) {
                this.gxArr = response.data.data;
                this.load()
              } else {
                this.$message.error(response.data.message)
              }
            }, error => {
              ElementUI.Message({
                message: error.message,
                type: 'error'
              })
            }
        )
      } else {
        service.get('/gx/getAll', {}).then(
            response => {
              if (response.data.code == 20000) {
                this.gxArr = response.data.data;
                this.load()
              } else {
                this.$message.error(response.data.message)
              }
            }, error => {
              ElementUI.Message({
                message: error.message,
                type: 'error'
              })
            }
        )
        // this.gxArr = []
      }
    }
    ,
    handleSelectionChange(selection) {
      // console.log(selection)
      // this.selectedRows = selection.map(row => row._row);
      this.selectedRows = selection
      // console.log(this.selectedRows)
    },

    handleSizeChange(val) {
      this.pageSize = val
      this.load()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.load()
    },



    search() {
      // this.currentPage = 1
      this.load()
    },


  }
}
</script>
<style scoped>
/deep/ .el-tree-node__content {
  height: 40px;
}

/deep/ .el-tree-node__label {
  font: bold 16px/1.5 "Microsoft YaHei";
}
</style>
